<template>
  <div>
    <div id="fu" @click.capture="fuFn()">
      <!-- $event 事件对象 -->
      <!-- <div id="zi" @click="ziFn($event)"></div> -->
      <div id="zi" @click.capture="ziFn()"></div>
    </div>
    <form action="" @submit.prevent="say">
      <input type="submit" />
    </form>
    <h1 @click.once="one">只触发一次</h1>
    <!-- 键盘事件修饰符 
    .enter .alt .shift .ctrl .delete .meta .esc .tab -->
    <input type="text" @keydown.enter="keydown()" />
    <!-- ctrl alt +a  -->
    <input type="text" @keydown.ctrl.alt.b="show" />
    <!-- v-model 修饰符 -->
    <!-- trim 去除首尾空格 -->
    <br />
    <input type="text" v-model.trim="str" />
    <input type="text" v-model.number="num" />
    <!-- 
      .lazy  由实时触发v-model 改变为blur 触发
     -->
    <input type="text" v-model.lazy="da" />
    <div style="margin-bottom:300px;"></div>
  </div>
</template>
<script>
// 事件修饰符
// .stop 阻止事件冒泡
// .self 当前元素本身触发
// .capture 捕获模式  由外向内触发
// .prevent 阻止默认行为
// .once  只执行一次的事件
// .passive主要用在移动端的scroll事件，来提高浏览器响应速度，提升用户体验。
// v-model 修饰符
export default {
  data () {
    return {
      str: '',
      num: '',
      da: ''
    }
  },
  watch: {
    num (newVal) {
      console.log(newVal)
    },
    da (newVal) {
      console.log(newVal)
    }
  },
  methods: {
    fuFn () {
      alert('父元素触发了')
    },
    ziFn (e) {
      // e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
      alert('子元素触发了')
    },
    one () {
      alert('只触发一次的事件')
    },
    keydown () {
      alert('有内鬼 停止交易')
    },
    show (e) {
      //CTRL+ALT +a 执行
      alert('执行')
    }
  }
}
</script>
<style lang="less">
#fu {
  width: 400px;
  height: 400px;
  background: darkgoldenrod;
  #zi {
    width: 200px;
    height: 200px;
    background: forestgreen;
  }
}
</style>
